<template>
    <div class="tags">
        <el-tag v-for="(tab, index) in tags" :key="tab.path" :closable="tab.path !== '/home'" @click="changeMenu(tab)"
         @close="handleClose(tab, index)" size="small" :effect="$route.path===tab.path ? 'dark' : 'plain' ">
            {{ tab.name }}
        </el-tag>
    </div>
</template>

<script>
import { mapState , mapMutations } from 'vuex'
export default {
    name: 'commonTag',
    computed: {
        ...mapState({
            tags: state => state.tab.tabsList
        }),
    },
    methods: {
        ...mapMutations({
            close: 'closeTag'
        }),
        changeMenu(tab) {
            this.$router.push({
                path:tab.path
            })
        },
        handleClose(tab,index) {
            const length=this.tags.length-1
            this.close(tab)
            if(tab.path !== this.$route.path){
                return;
            }
            if(tab.path===this.$route.path){
                this.$router.push({
                    path:this.tags[index-1].path
                })
            }else{
                this.$router.push({
                    path:this.tags[index].path
                })
            }

        }
    }
}
</script>

<style lang="less" scoped>
.tags {
    padding: 20px;

    .el-tag {
        margin-right: 15px;
        cursor: pointer;
    }
}
</style>